import React, { useEffect, useState } from 'react'
import axios from 'axios';
import { Table, Tag } from 'antd';
import { useAddkey } from '@/hooks/index'
import { Input } from 'antd';
import { Col, Row, Button } from 'antd';
import { connect } from "react-redux"
const columns = [
  {
    title: 'ID',
    dataIndex: 'kefu_id',
    key: 'kefu_id',
  },
  {
    title: '客服编码',
    dataIndex: 'kefu_code',
    key: 'kefu_code',
  },
  {
    title: '客服名称',
    dataIndex: 'kefu_name',
    key: 'kefu_name',
  },
  {
    title: '客服头像',
    key: 'kefu_avatar',
    dataIndex: 'kefu_avatar',
    render: (item: any) => {
      return <img style={{
        width: 50,
        height: 50
      }} src={`http://fangadmin.shbwyz.com/${item}`} alt="" />
    }
  },
  {
    title: '在线状态',
    key: 'online_status',
    dataIndex: 'online_status',
    render: (item: any) => {
      return item == 1 ? <Tag color="green">在线</Tag> : <Tag color="red">离线</Tag>
    }
  },
  {
    title: '创建时间',
    key: 'create_time',
    dataIndex: 'create_time',
  },
  {
    title: '操作',
    key: 'end_date',
    dataIndex: 'end_date',
    render: () => {
      return <Row gutter={16}>
        <Col>
          <Button style={{
            color: 'white',
            background: 'green'
          }}>编辑</Button>
        </Col>
        <Col>
          <Button style={{
            color: '#ccffc',
            background: 'yellow'
          }}>修改密码</Button>
        </Col>
        <Col>
          <Button style={{
            color: 'white',
            background: 'red'
          }}>删除</Button>
        </Col>
      </Row>
    }
  }
];

const { Search } = Input;


export default function service() {
  const [totals, setTotal] = useState<any>([])
  const [data, setData] = useState([])

  useEffect(() => {
    axios.get('/getList', {
      params: {
        search: ''
      }
    }).then(res => {
      useAddkey(res.data)
      setData(res.data)
      setTotal(res.data.length)
    })
  }, [])
  const onSearch = (value: string) => {
    axios.get('/getList', {
      params: {
        search: value
      }
    }).then(res => {
      setData(useAddkey(res.data))
      setTotal(res.data.length)
    })
  };
  return (
    <div>

      <Search
        placeholder="招待客服"
        allowClear
        enterButton="搜索"
        size="middle"
        onSearch={onSearch}
        style={{
          width: 450,
          marginBottom: 50
        }}
      />

      <select style={{
        width: 150,
        height: 33,
        marginLeft: 30
      }} onChange={(e) => {
        axios.get('/getListshai', {
          params: {
            option: e.target.value
          }
        }).then(res => {
          console.log(res.data, '22222222')
          useAddkey(res.data);
          setData(res.data)
          setTotal(res.data.length)
        })
      }}>
        <option value=''>所有</option>
        <option value='ing'>在线</option>
        <option value='out'>离线</option>
      </select>


      <Table columns={columns}
        pagination={
          {
            pageSize: 5,
            pageSizeOptions: [1, 2, 3, 4, 5],
            total: totals
          }
        }
        dataSource={data} />
    </div>
  )
}

